@model OrchardCore.Media.ViewModels.EditMediaFieldViewModel
@using OrchardCore.Media.Settings;
@using OrchardCore.ContentManagement.Metadata.Models

<script asp-src="/OrchardCore.Media/Scripts/media.js" asp-name="media" at="Foot" depends-on="admin, vuejs, sortable, vuedraggable"></script>
<style asp-src="/OrchardCore.Media/Styles/media.min.css" debug-src="/OrchardCore.Media/Styles/media.css"></style>
<script asp-src="https://vuejs.org/js/vue.min.js" debug-src="https://vuejs.org/js/vue.js" asp-name="vuejs" at="Foot"></script>
<script asp-src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js" debug-src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.js" asp-name="sortable" at="Foot"></script>
<script asp-src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.min.js" debug-src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.js" asp-name="vuedraggable" depends-on="vuejs, sortable" at="Foot"></script>

@{
    var settings = Model.PartFieldDefinition.Settings.ToObject<MediaFieldSettings>();
    var modalMediaId = "Modal" + Html.IdFor(m => m);
}

<script at="Foot">
    initializeMediaApplication(false, '@Url.Action("MediaApplication", "Admin", new { area = "OrchardCore.Media" })');
    initializeMediaFieldEditor(
        document.getElementById('@Html.IdFor(m => m)'),
        document.getElementById('@Html.IdFor(m => m)-ModalBody'),
        '@Url.Action("GetMediaItem", "Admin", new { area = "OrchardCore.Media" })',
        @(settings.Multiple ? "true" : "false"));
</script>

<input type="hidden" id="onlyOneItemMessage" value="@T["Only one item is allowed on this field."]" />

<div class="mediafield-editor" id="@Html.IdFor(m => m)" data-for="@Html.IdFor(m => m.Paths)">
    <div class="media-field">
        <fieldset class="form-group">
            <label asp-for="Paths">@Model.PartFieldDefinition.DisplayName()</label>
            @if (!string.IsNullOrWhiteSpace(settings.Hint))
            {
                <span class="hint">@settings.Hint</span>
            }

            <input asp-for="Paths" type="hidden" class="paths" :value="paths" data-init="@Model.Paths" />

            <nav class="media-field-toolbar" v-cloak>
                <div class="btn-group">
                    <button type="button" class="btn btn-secondary btn-sm" :disabled="mediaItems.length < 1" v-on:click="smallThumbs = !smallThumbs">
                        <span v-show="!smallThumbs" title="@T["Small Thumbs"]"><i class="fa fa-compress"></i></span>
                        <span v-show="smallThumbs" title="@T["Large Thumbs"]"><i class="fa fa-expand"></i></span>
                    </button>
                    <a href="javascript:;" v-show="canAddMedia" v-on:click="showModal" class="btn btn-secondary btn-sm"><i class="fa fa-plus"></i></a>
                    <a v-show="canRemoveMedia" href="javascript:;" v-on:click="removeSelected" class="btn btn-secondary btn-sm"><i class="fa fa-trash"></i></a>
                </div>
                <div style="display:flex; justify-content:flex-end; align-items:flex-end; flex-grow:1;">
                    <code class="text-right" v-if="selectedMedia">@T["{{{{ selectedMedia.name }}}} ({{{{ isNaN(fileSize)? 0 : fileSize }}}} KB)"]</code>
                </div>
            </nav>

        </fieldset>
        <fieldset class="form-group">
                <div class="media-container-main" v-cloak>
                    <draggable :list="mediaItems" element="ol" class="row">
                        <li v-for="media in mediaItems"
                            :key="media.name"
                            class="media-container-main-list-item card"
                            :style="{width: thumbSize + 2 + 'px'}"
                            :class="{selected: selectedMedia == media}"
                            v-on:click="selectMedia(media)">
                            <div v-if="media.mediaPath!== 'not-found'">
                                <div class="thumb-container" :style="{height: thumbSize + 'px'}" >
                                    <img v-if="media.mime.startsWith('image')" 
                                         :src="media.url + '?width=' + thumbSize + '&height=' + thumbSize" 
                                         :data-mime="media.mime"
                                         :style="{maxHeight: thumbSize + 'px', maxWidth: thumbSize + 'px'}"/>
                                    <i v-else class="fa fa-file-o" :data-mime="media.mime"></i>
                                </div>
                                <div class="media-container-main-item-title card-body">
                                    <a href="javascript:;" class="btn btn-light btn-sm float-right inline-media-button" 
                                       v-on:click.stop="selectAndDeleteMedia(media)"><i class="fa fa-trash"></i></a>
                                    <span class="media-filename card-text small" :title="media.mediaPath">{{media.name}}</span>                                    
                                </div>
                            </div>
                            <div v-else>
                                <div class="thumb-container flex-column" :style="{height: thumbSize + 'px'}">
                                    <i class="fa fa-ban text-danger d-block"></i>
                                    <span class="text-danger small d-block">@T["Not Found"]</span>
                                    <span class="text-danger small d-block text-center">@T["It will be discarded on saving"]</span>
                                </div>
                                <div class="media-container-main-item-title card-body">
                                    <a href="javascript:;" class="btn btn-light btn-sm float-right inline-media-button"
                                       v-on:click.stop="selectAndDeleteMedia(media)"><i class="fa fa-trash"></i></a>
                                    <span class="media-filename card-text small text-danger" :title="media.name">{{media.name}}</span>
                                </div>
                                
                            </div>
                        </li>
                    </draggable>
                </div>
        </fieldset>
    </div>
</div>

<div class="modal" id="@Html.IdFor(m => m)-ModalBody">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@T["Select Media"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary mediaFieldSelectButton">@T["OK"]</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>
